import { useCallback } from "react";
import Style from "./index.module.scss";
import { LIST_FILTER, getListFilter } from "../../reducer/selectParam";
import classNames from "classnames";
import { dealListData } from "./config";
import store from "../../reducer";
import { getList } from "../../reducer/list";
import { getListScroll } from "../../reducer/listScroll";
import { observer } from "mobx-react-lite";

const BtmNavBar = observer(() => {
  const listFilter = getListFilter(store);
  const list = getList(store);
  const scrollState = getListScroll(store);

  const handleClick = useCallback(
    (targetKey: keyof LIST_FILTER) => {
      // 改变数据
      // 取消活跃，若点击的是常驻的则不用
      if (!listFilter[targetKey].isAlwaysActive) {
        let key: keyof LIST_FILTER;
        for (key in listFilter) {
          const item = listFilter[key];
          if (item.isActive && !item.isAlwaysActive && key !== targetKey) {
            const data = item.clickFn(1);
            data && store.listFilter.setListFilter(key, data);
          }
        }
      }

      // 将点击的tab设为活跃
      const data = listFilter[targetKey].clickFn(
        listFilter[targetKey].isActive ? 2 : 0
      );

      data && store.listFilter.setListFilter(targetKey, data);

      data && dealListData[targetKey](store, !!data.state, list);
    },
    [listFilter, list]
  );
  return (
    <div
      className={classNames(Style.navbar, {
        [Style.moving]: scrollState,
      })}
    >
      {Object.entries(listFilter).map(([key, item]) => (
        <div
          key={key}
          className={classNames(Style.item, {
            [Style.active]: item.isActive,
          })}
          onClick={() => handleClick(key as keyof LIST_FILTER)}
        >
          {
            //@ts-expect-error xxx
            <item.icon className={[Style.icon]} />
          }
          <div className={Style.desc}>{item.desc}</div>
        </div>
      ))}
    </div>
  );
});

export default BtmNavBar;
